<template>
    <div>
        <!-- <div v-if="isLoading" id="loading" style="width:100%;height:100vh;    align-items: center;display: flex;justify-content: center;">
            <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="30px" viewBox="0 0 24 30" style="enable-background:new 0 0 50 50;" xml:space="preserve">
                <rect x="0" y="10" width="4" height="10" fill="#333" opacity="0.2">
                    <animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0s" dur="0.6s" repeatCount="indefinite" />
                    <animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0s" dur="0.6s" repeatCount="indefinite" />
                    <animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0s" dur="0.6s" repeatCount="indefinite" />
                </rect>
                <rect x="8" y="10" width="4" height="10" fill="#333" opacity="0.2">
                    <animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0.15s" dur="0.6s" repeatCount="indefinite" />
                    <animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0.15s" dur="0.6s" repeatCount="indefinite" />
                    <animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0.15s" dur="0.6s" repeatCount="indefinite" />
                </rect>
                <rect x="16" y="10" width="4" height="10" fill="#333" opacity="0.2">
                    <animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0.3s" dur="0.6s" repeatCount="indefinite" />
                    <animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0.3s" dur="0.6s" repeatCount="indefinite" />
                    <animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0.3s" dur="0.6s" repeatCount="indefinite" />
                </rect>
            </svg>
        </div> -->
        <div class="container_index">
            <div class="swipediv">
                <mt-swipe>
                    <mt-swipe-item v-for="(item ,index) in bannerlist" :key="index">
                        <div class="img-part">
                            <img onclick="return false;" :src="item.src">
                        </div>
                    </mt-swipe-item>
                </mt-swipe>
            </div>
            <div class="service-list" ref="twostep">
                <div v-for="(item, k) in ballArray" :key="k" @click="siginclick(item.path)" class="service-list-item">
                    <img class="service-cion" :src="item.src">
                    <div class="service-title">{{item.title}}</div>
                </div>
            </div>
            <div class="content">
                <div class="part-top">
                    <div class="audit-tips">待激活额度</div>
                    <div class="audit">{{checkindata.credit2Audit||0}}</div>
                    <div class="today">今日增加+{{checkindata.quotaToday||0}}</div>
                    <router-link to="/sign">
                        <span>领取额度</span>
                    </router-link>
                </div>
                <div class="line">
                    <img src='~/assets/image/bg_quota_line@3x.png'>
                </div>
                <div class="part-bottom">
                    <div class="available">
                        可用额度：{{checkindata.total}}
                    </div>
                    <div class="btns">
                        <span @click="getMoney();">提现</span>
                    </div>
                </div>
            </div>
            <!-- <div class="rb_floating" ref="kfdali" @click='closeTuling'></div> -->
            <div class="rb_floating" ref="kfdali"></div>
        </div>
    </div>
</template>


<script>
import config from '~/assets/api/config'
import os from '~/assets/api/os'
export default {
    data() {
        return {
            isLoading: true,
            bannerlist: [
                { src: require('~/assets/image/Home/banner_one.jpg') },
                { src: require('~/assets/image/Home/banner_two.jpg') }
            ],
            ballArray: [
                {
                    path: 'sign',
                    title: '打卡',
                    src: require('~/assets/image/Home/icon_signIn1.png')
                },
                {
                    path: 'JDhome',
                    title: '京东',
                    src: require('~/assets/image/Home/icon_jd.png')
                },
                {
                    path: 'metTuan',
                    title: '美团',
                    src: require('~/assets/image/Home/but_meituan.png')
                },
                {
                    path: 'charge-call',
                    title: '话费充值',
                    src: require('~/assets/image/Home/icon_recharge1.png')
                },
                {
                    path: 'services',
                    title: '更多',
                    src: require('~/assets/image/Home/icon_more1.png')
                }
            ],
            checkindata: []
        }
    },
    methods: {
        siginclick(url) {
            if (url == 'JDhome') {
                window.location.href = `${
                    config.API_JD_URL
                }/JDhome?platform=lxk&token=${localStorage.getItem('token')}`
                return
            }
            if (url == 'services') {
                window.location.href =
                    app.API_JD_URL +
                    '/services?from=JDHome&platform=lxk&token=' +
                    localStorage.getItem('token')
                return
            }
            if (url == 'charge-call') {
                window.location.href =
                    app.API_JD_URL +
                    '/teleCharge?from=JDHome&platform=lxk&token=' +
                    localStorage.getItem('token')
                return
            } else if (url == 'metTuan') {
                let time = new Date().getTime()
                window.location.href = `${
                    app.API_JD_URL
                }/goMt?&platform=lxk&timer=${time}&token=${localStorage.getItem(
                    'token'
                )}`
                // localStorage.setItem('mtenter', '1')
                // this.$axios.get(`${app.API_MT}/v1/mt/getWebUrl`).then(res => {
                //     console.log(res.data.data)
                //     if (res.data.code == '0') {
                //         window.location.href = res.data.data
                //         if (os.isAndroid()) {
                //             window.control.set_pushtomeituan('');
                //         }
                //         if (os.isIOS()) {
                //             window.webkit.messageHandlers.set_pushtomeituan.postMessage('');
                //         }
                //     }
                // })
            } else {
                this.$router.push({ name: url })
            }
        },
        getMoney() {
            Promise.all([
                this.$axios.post(
                    app.API_BES_URL + '/api/backend/v1/bill/getHomeBillData',
                    {
                        type: 1
                    }
                ),
                this.$axios.post(app.API_BES_URL + '/api/backend/v1/bill/getPtDay')
            ]).then(([res, ptDay]) => {
                if (res.data.code == 0) {
                    if (res.data.data == 1) {
                        this.$Toast({
                            message: `亲，打卡满${
                                ptDay.data.data.newbie_day
                            }天才能提现哦～`,
                            className: 'index-this.$Toast'
                        })
                    } else if (res.data.data == 2) {
                        this.$router.push({ name: 'Bankcard' })
                    } else {
                        this.$router.push({
                            name: 'PutForward',
                            query: { tab: 'account' }
                        })
                    }
                }
            })
        },
        closeTuling() {
            localStorage.setItem('mtenter', '1')
            if (os._android()) {
                window.location.href =
                    'http://www.tuling123.com/static/talk/?a=272204%2Fi3Ws&u=93F2A6A72B8FC3D7'
            } else {
                if (os.isIosLxkApp()) {
                    try {
                        window.webkit.messageHandlers.set_pushxiaowenrobot.postMessage(
                            ''
                        )
                    } catch (err) {}
                    window.location.href =
                        'http://www.tuling123.com/static/talk/?a=272204%2Fi3Ws&u=93F2A6A72B8FC3D7'
                } else {
                    // this.$router.push({ name: 'robot' })
                    window.location.href =
                        'http://www.tuling123.com/static/talk/?a=272204%2Fi3Ws&u=93F2A6A72B8FC3D7'
                }
            }
        }
    },
    mounted() {
        this.$axios
            .post(config.API_BES_URL + '/api/backend/v1/checkin/getCheckinHome')
            .then(res => {
                // console.log(res);
                if (res.data.code == 0) {
                    this.checkindata = res.data.data
                }
            })
    }
}
</script>

<style scoped lang="less">
    .container_index {
        width: 100%;
        margin: 0 auto;
        position: relative;
        padding-bottom: 50px;
        .service-list {
            background: #ffffff;
            display: flex;
            display: -webkit-flex;
            justify-content: space-around;
            align-content: center;
            .service-list-item {
                text-align: center;
                flex-grow: 2;
                box-sizing: border-box;
                background-color: white;
                margin-top: 50px;
                margin-bottom: 52.5px;
                font-size: 15px;
            }

            .service-cion {
                height: 57px;
                width: 57px;
            }

            .service-title {
                width: auto;
                color: #000;
                margin-top: 39px;
                font-size: 24px;
                font-weight: 500;
            }
        }

        .content {
            width: 100%;
            height: 426px;
            background: url("../../assets/image/bg_quota@3x.png") no-repeat;
            background-size: cover;
            margin-top: 60px;
            //display: flex;

            justify-content: space-between;
            box-sizing: border-box;
            padding: 32px 80px;

            span {
                display: inline-block;
                font-weight: 500;
                font-size: 24px;
                text-align: center;
                width: 183px;
                padding: 16px 0;
                border-radius: 62.5px;
                color: #2c2a1e;
                filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#ffdf00', endColorStr='#ffcd00', gradientType='1');
                background: -moz-linear-gradient(left, #ffdf00, #ffcd00);
                background: -o-linear-gradient(left, #ffdf00, #ffcd00);
                background: -webkit-gradient(
                    linear,
                    0% 0%,
                    100% 0%,
                    from(#ffdf00),
                    to(#ffcd00)
                );
            }

            span:active {
                filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#ECC111', endColorStr='#E6C022', gradientType='1');
                background: -moz-linear-gradient(left, #ecc111, #e6c022);
                background: -o-linear-gradient(left, #ecc111, #e6c022);
                background: -webkit-gradient(
                    linear,
                    0% 0%,
                    100% 0%,
                    from(#ecc111),
                    to(#e6c022)
                );
            }

            .part-top {
                padding-top: 10px;

                text-align: center;
                .audit-tips {
                    font-size: 28px;
                    line-height: 40px;
                }

                .audit {
                    font-size: 50px;
                    line-height: 68px;
                }

                .today {
                    padding-top: 10px;
                    font-size: 18px;
                    line-height: 20px;
                }

                a {
                    margin-top: 10px;
                    display: inline-block;
                }
            }

            .line {
                margin-right: -32px;
                margin-top:-32px;
                img {
                    width: 100%;
                }
            }

            .part-bottom {
                margin-right: -24px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                .available {
                    font-size: 24px;
                }

                .btns {
                    span {
                        width: 114px;
                        height: 41px;
                        padding: 0;
                        line-height: 50px;
                    }
                }
            }
        }

        .swipediv {
            margin-top: 0;
            width: 100%;
            height: 530px;
            .img-part {
                width: 100%;
                height: 530px;
                img {
                    display: block;
                    width: 100%;
                    height: 530px;
                }
            }
        }

        .rb_floating {
            position: fixed;
            z-index: 100;
            right: -45px;
            top: 725px;
            width: 195px;
            height: 92.5px;
            background: url("../../assets/image/Home/icon_tuling.png") no-repeat left
                top;
            background-size: 100% auto;
        }
    }
</style>
<style>

    .index-this.$Toast {
        width: 60% !important;
        border-radius: 10px !important;
    }

    .container_index .mint-swipe-indicator {
        width: 17.5px;
        height: 17.5px;
        opacity: 1 !important;
        margin: 0 17.5px !important;
        border-radius: 0 !important;
        background: url("../../assets/image/Home/icon_yuan_w.png") no-repeat !important;
        background-size: 100% 100% !important;
    }

    .container_index .mint-swipe-indicator.is-active {
        background: url("../../assets/image/Home/icon-yuan-h.png") no-repeat !important;
        border-radius: 0 !important;
        background-size: 100% 100% !important;
        opacity: 1 !important;
    }
</style>
<!-- <style scoped>
.container_index {
    width: 100%;
    margin: 0 auto;
    position: relative;
    padding-bottom: 50px;
}
.container_index .service-list {
    background: #ffffff;
    display: flex;
    display: -webkit-flex;
    justify-content: space-around;
    align-content: center;
}
.container_index .service-list .service-list-item {
    text-align: center;
    flex-grow: 2;
    box-sizing: border-box;
    background-color: white;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    font-size: 0.2rem;
}
.container_index .service-list .service-cion {
    height: 1.8rem;
    width: 1.8rem;
}
.container_index .service-list .service-title {
    width: auto;
    color: #000;
    margin-top: 0.52rem;
    font-size: 0.32rem;
    font-weight: 500;
}
.container_index .content {
    width: 100%;
    height: 14.5rem;
    background: url('../../assets/image/bg_quota@3x.png') no-repeat;
    background-size: cover;
    margin-top: 1.6rem;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 0.86rem 2.5rem;
}
.container_index .content span {
    display: inline-block;
    font-weight: 500;
    font-size: 0.65rem;
    text-align: center;
    width: 5.5rem;
    padding: 0.55rem 0;
    border-radius: 1.6rem;
    color: #2c2a1e;
    filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#ffdf00', endColorStr='#ffcd00', gradientType='1');
    background: -moz-linear-gradient(left, #ffdf00, #ffcd00);
    background: -o-linear-gradient(left, #ffdf00, #ffcd00);
    background: -webkit-gradient(
        linear,
        0% 0%,
        100% 0%,
        from(#ffdf00),
        to(#ffcd00)
    );
}
.container_index .content span:active {
    filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#ECC111', endColorStr='#E6C022', gradientType='1');
    background: -moz-linear-gradient(left, #ecc111, #e6c022);
    background: -o-linear-gradient(left, #ecc111, #e6c022);
    background: -webkit-gradient(
        linear,
        0% 0%,
        100% 0%,
        from(#ecc111),
        to(#e6c022)
    );
}
.container_index .content .part-top {
    padding-top: 0.26rem;
    text-align: center;
}
.container_index .content .part-top .audit-tips {
    font-size: 0.9rem;
    line-height: 2rem;
}
.container_index .content .part-top .audit {
    font-size: 1.25rem;
    line-height: 2rem;
}

.container_index .content .part-top .today {
    padding-top: 0.26rem;
    font-size: 0.5rem;
    line-height: 0.55rem;
}

.container_index .content .part-top a {
    margin-top: 1.25rem;
    display: inline-block;
}
.container_index .content .line {
    margin-right: -0.86rem;
}
.container_index .content .line img {
    width: 100%;
}

.container_index .content .part-bottom {
    margin-right: -0.64rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.container_index .content .part-bottom .available {
    font-size: 0.64rem;
}

.container_index .content .part-bottom .btns span {
    width: 3rem;
    height: 1.45rem;
    padding: 0;
    line-height: 1.35rem;
}

.container_index .swipediv {
    margin-top: 0;
    width: 100%;
    height: 15rem;
}
.container_index .swipediv .img-part {
    width: 100%;
    height: 16.5rem;
}
.container_index .swipediv .img-part img {
    display: block;
    width: 100%;
    height: 16.5rem;
}

.rb_floating {
    position: fixed;
    z-index: 100;
    right: -1.5rem;
    top: 22.5rem;
    width: 5rem;
    height: 2.5rem;
    background: url('../../assets/image/Home/icon_tuling.png') no-repeat left
        top;
    background-size: 100% auto;
}
.index-this.$Toast {
    width: 60% !important;
    border-radius: 10px !important;
}

.container_index .mint-swipe-indicator {
    width: 17.5px;
    height: 17.5px;
    opacity: 1 !important;
    margin: 0 17.5px !important;
    border-radius: 0 !important;
    background: url('../../assets/image/Home/icon_yuan_w.png') no-repeat !important;
    background-size: 100% 100% !important;
}

.container_index .mint-swipe-indicator.is-active {
    background: url('../../assets/image/Home/icon-yuan-h.png') no-repeat !important;
    border-radius: 0 !important;
    background-size: 100% 100% !important;
    opacity: 1 !important;
}
</style> -->
